<template>
  <div class="bill-container">
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>账单管理</el-breadcrumb-item>
      <el-breadcrumb-item>学生账单</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <!-- 分页查询学生信息 -->
      <el-form :inline="true">
        <el-form-item>
          <el-input v-model="queryInfo.studentName" placeholder="学生姓名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="queryInfo.studentNum" placeholder="学生校号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="queryInfo.department" placeholder="学生所在院系"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="queryInfo.classes" placeholder="学生所在班级"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getStudentList()">查询</el-button>
          <el-button type="primary" icon="el-icon-refresh" @click="resetSearch()">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 学生信息table -->
      <el-table :data="studentInfo" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="姓名" prop="studentName"></el-table-column>
        <el-table-column label="校号" prop="studentNum"></el-table-column>
        <el-table-column label="院系" prop="department"></el-table-column>
        <el-table-column label="班级" prop="classes"></el-table-column>
        <el-table-column label="账单">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="showBill(scope.row.id)">查看账单</el-button>
          </template>
        </el-table-column>
        <!-- <el-table-column label="充值记录">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="showCharge(scope.row.id)">充值记录</el-button>
          </template>
        </el-table-column> -->
        <el-table-column label="导出账单">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="exportBill(scope.row.id)">导出账单</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.pageIndex"
        :page-sizes="[2, 5, 10, 20]"
        :page-size="this.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.total"
      >
        <!-- :total="100" -->
      </el-pagination>
      <!-- 学生账单dialog -->
      <el-dialog title="学生账单" :visible.sync="dialogVisible" width="50%" :before-close="billDialogClose">
        <el-tabs v-model="activeName" @tab-click="tabChange">
          <!-- 学生账单 -->
          <el-tab-pane label="学生账单" name="studentBill">
            <el-table :data="studentBill" border stripe>
              <el-table-column type="index"> </el-table-column>
              <el-table-column label="日期" prop="createTime"></el-table-column>
              <el-table-column label="消费金额" prop="amount"></el-table-column>
              <el-table-column label="消费渠道" prop="channel"></el-table-column>
            </el-table>
          </el-tab-pane>
          <!-- 充值记录 -->
          <el-tab-pane label="充值记录" name="chargeInfo">
            <el-table :data="chargeInfo" border stripe>
              <el-table-column type="index"></el-table-column>
              <el-table-column label="充值时间" prop="createTime"></el-table-column>
              <el-table-column label="充值人" prop="studentName"></el-table-column>
              <el-table-column label="充值人校号" prop="studentNum"></el-table-column>
              <el-table-column label="充值金额" prop="amount"></el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import commonServe from '../../api/services/common.serve'
import { serveBaseUrl } from '../../api/environment'
export default {
  data() {
    return {
      dialogVisible: false,
      activeName: 'studentBill',
      pageSize: 10,
      pageIndex: 1,
      queryInfo: {},
      total: 0, //总条数
      // 学生信息
      studentInfo: [],
      //   学生账单
      studentBill: [],
      //   充值信息
      chargeInfo: [],
      currentStudentId: ''
    }
  },
  created() {
    this.getStudentList()
  },
  methods: {
    // 查询学生列表
    getStudentList() {
      commonServe
        .getAllStudentList(this.pageIndex, this.pageSize, this.queryInfo)
        .then((res) => {
          console.log(res)
          if (res.code === 200) {
            this.studentInfo = res.data.list
            this.total = res.data.total
          } else {
            this.$message.warning('获取学生信息失败，请刷新重试')
          }
        })
        .catch((err) => {
          this.$message.warning(err.$message || '获取学生信息失败，请刷新重试')
        })
    },
    // 充值查询表单
    resetSearch() {
      this.queryInfo = {}
      this.getStudentList()
    },
    // 监听pageSize
    handleSizeChange(newSize) {
      console.log(newSize)
      this.pageIndex = newPage
      this.getStudentList()
    },
    // 监听pageIndex
    handleCurrentChange() {
      console.log(newSize)
      this.pageSize = newSize
      this.getStudentList()
    },
    // 展示账单,根据学生id查询账单
    showBill(val) {
      console.log(val)
      this.currentStudentId = val
      this.dialogVisible = true
      commonServe
        .getStudentBill(val)
        .then((res) => {
          console.log(res)
          if (res.code === 200) {
            this.studentBill = res.data.list
          } else {
            this.$message.warning('获取账单失败')
          }
        })
        .catch((err) => {
          this.$message.warning('获取账单失败' || err.message)
        })
    },
    // 根据学生id查询充值记录
    getChargeBill() {
      commonServe
        .getStudentChargeInfo(this.currentStudentId)
        .then((res) => {
          console.log(res)
          if (res.code === 200) {
            this.chargeInfo = res.data.list
          } else {
            this.$message.warning('获取充值信息失败')
          }
        })
        .catch((err) => {
          this.$message.warning(err.message || '获取充值记录失败')
        })
    },
    // tab页面改变
    tabChange(val) {
      console.log(this.activeName)
      if (this.activeName === 'chargeInfo') {
        this.getChargeBill()
      }
    },
    // 账单对话框关闭的事件
    billDialogClose() {
      this.dialogVisible = false
      this.activeName = 'studentBill'
      console.log(this.activeName)
    },
    // 导出账单
    exportBill(val) {
      console.log(val)
      commonServe.exportStudentBill(val).then((res) => {
        // console.log(res)
        // 获取
        // console.log(window.location, 123)
        window.location.href = serveBaseUrl + `bill/exportBill/${val}`
      })
    }

    // 封装下载excel
    // downLoadExcel(blobPart, filename) {
    //   const blob = new Blob([blobPart], { type: 'application/vnd.ms-excel' })
    //   console.log(blob, 123)
    //   // 创建一个超链接，将文件流赋进去，然后实现这个超链接的单击事件
    //   const eLink = document.createElement('a')
    //   eLink.download = decodeURIComponent(filename)
    //   eLink.style.display = 'none'
    //   eLink.href = URL.createObjectURL(blob)
    //   document.body.appendChild(eLink)
    //   eLink.click()
    //   URL.revokeObjectURL(eLink.href) //释放URL对象
    //   document.body.removeChild(eLink)
    // }
  }
}
</script>

<style></style>
